<template>
  <!-- 更换负责人手机号 -->
  <view class="dutyPersonphone">
    <view class="content">
      <view class="content-item">
        <u-form :model="form" ref="form" label-width="280" labelPosition="’top‘" :error-type="errorType">
          <block v-if="numRecord == 0">
            <u-form-item label="原手机号码" borderBottom>
              <u--input type="number" :maxlength="11" v-model="form.mobile" border="none" readonly></u--input>
            </u-form-item>
            <u-form-item borderBottom>
              <view class="codeForm">
                <u--input v-model="form.mobileCode" placeholder="填写验证码" :maxlength="6" border="none"></u--input>

                <u-code :startText="'获取验证码'" :endText="'获取验证码'" ref="uCode" @change="codeChange"></u-code>
                <button class="lookbtn code-btn" @tap="getCode">
                  {{ tips }}
                </button>
              </view>
            </u-form-item>
          </block>
          <block v-else>
            <u-form-item label="新手机号码" borderBottom>
              <u--input type="number" :maxlength="11" v-model="form.mobileNew" border="none"></u--input>
            </u-form-item>
            <u-form-item borderBottom>
              <view class="codeForm">
                <u--input v-model="form.mobileCodeNew" placeholder="填写验证码" :maxlength="6" border="none"></u--input>

                <u-code :startText="'获取验证码'" :endText="'获取验证码'" ref="uCode" @change="codeChange"></u-code>
                <button class="lookbtn code-btn" @tap="getCodeNew">
                  {{ tips }}
                </button>
              </view>
            </u-form-item>
          </block>
        </u-form>
      </view>
    </view>

    <view class="btns">
      <button v-if="numRecord == 0" class="submit-btn" type="primary" style="width: 100%" @click="nextHandle">
        下一步
      </button>
      <button v-else class="submit-btn" type="primary" @click="submitHandle" style="width: 100%">
        确认
      </button>
    </view>
  </view>
</template>

<script>
  import {
    dutyAuthenticate,
    messageSendsms,
    checkDutyInfo,
  } from "@/api/myself.js";
  import {
    Toast,
    navBack
  } from "@/utils/util.js";

  export default {
    name: "dutyPersonphone",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        form: {},
        options: {},
        errorType: ["none"],
        tips: "",
        oldLegalKey: "", // 原法人手机验证通过key
        numRecord: 0,
      };
    },
    onLoad(options) {
      this.options = JSON.parse(decodeURIComponent(options.data));
      this.form.mobile = this.options.mobile;
    },
    methods: {
      codeChange(text) {
        this.tips = text;
      },
      // 原手机号码  请求验证码
      getCode() {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: "正在获取验证码",
          });
          setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.$u.toast("验证码已发送");
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();

            let data = {
              companyId: this.options.id,
              mobile: this.options.mobile,
              smsType: "UPDATE_OLD_DUTY_MOBILE",
            };

            messageSendsms(data).then((res) => {
              if (res.code != 200) {
                Toast(res.message);
              }
            });
          }, 2000);
        }
      },
      getCodeNew() {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: "正在获取验证码",
          });
          setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.$u.toast("验证码已发送");
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();

            let data = {
              companyId: this.options.id,
              mobile: this.form.mobileNew,
              smsType: "UPDATE_NEW_DUTY_MOBILE",
            };

            messageSendsms(data).then((res) => {
              if (res.code != 200) {
                Toast(res.message);
              }
            });
          }, 2000);
        }
      },
      nextHandle() {
        if (!this.form.mobileCode) {
          Toast("请输入验证码");
          return false;
        }

        dutyAuthenticate({
          id: this.options.id,
          mobileCode: this.form.mobileCode,
        }).then((res) => {
          if (res.code == 200) {
            this.oldLegalKey = res.result.authenticate;
            this.numRecord = 1;
          } else if (res.code == 400) {
            Toast(res.message);
          }
        });
      },
      submitHandle() {
        let {
          mobileNew,
          mobileCodeNew
        } = this.form;
        if (!mobileNew) {
          Toast("请输入新手机号码");
          return;
        }

        if (mobileNew && !this.$u.test.mobile(mobileNew)) {
          Toast("请输入正确的手机号");
          return;
        }

        if (!mobileCodeNew) {
          Toast("请输入验证码");
          return;
        }

        checkDutyInfo({
          id: this.options.id,
          oldLegalKey: this.oldLegalKey,
          mobileCode: mobileCodeNew,
          mobile: mobileNew,
        }).then((res) => {
          if (res.code == 200) {
            uni.$emit("mobileNew", mobileNew);
            navBack();
          } else if (res.code == 400) {
            Toast(res.message);
          }
        });
      },
    },
  };
</script>

<style lang="scss">
  .dutyPersonphone {
    flex: 1;
    background-color: #f9f9f9;

    .content {
      margin: 0 auto;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      width: calc(100% - 35rpx);
      height: calc(100vh - 84px);
      overflow-y: auto;

      .content-item {
        padding: 25rpx;
        background: #fff;

        .code-btn {
          color: #2488f5;
          font-size: 28rpx;
        }

        .codeForm {
          display: flex;
          justify-content: space-around;
        }
      }
    }
  }
</style>